<template>
    <div class="continue">
        <my-header></my-header>
        <div class="whole">
        <div class="top">
            <img src="http://www.yhachina.com/images/membership/apply-processs.jpg" alt="">
        </div>
        <div class="bottom">
            <div class="bottom_bar">
                <h2> 填写续卡会员信息 </h2>
                <div class="hope">
                    <div class="if">请输入希望续卡的会员信息，并确认信息正确，您可一次续多张不同类型的会员卡。如果会员卡号码与证件号码不匹配，需要联系修改</div>
                    <div class="if">如果您忘记了会员卡号，请点击<a href="">会员卡号自助查询</a></div>
                </div>

                <div class="number">
                    <ul>
                        <li>
                            <label for="">会员卡号码 :</label>
                            <input type="text">
                        </li>
                        <li>
                            <label for="">证件号 :</label>
                            <input type="text">
                        </li>
                    </ul>
                    <a href="">查询</a>
                </div>

                <div class="add">
                    <div class="add_bar">
                        <span>
                            <svg xmlns="http://www.w3.org/2000/svg" width="35" height="35" color="orange" fill="currentColor" class="bi bi-plus-circle" viewBox="0 0 16 16">
  <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
  <path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"/>
</svg>
                        </span>
                        添加会员卡 
                    </div>
                    <br>
                </div>

                <div class="explain">
                            续卡费用及说明： 
                            <br>

                            <div class="exlplain_bar">      
1.第一年续卡的费用为原价50元的9折，45元及回邮费用。第二年及以后为8折，40元及回邮费用。 也可以凭旧卡直接到国际青年旅舍<font>®</font>中国总部办理续卡。 
<br>

2.续卡和新办理的会员卡一样，都是获取新的会员卡号，原来的卡号过期后不会继续延用。 
<br>

3.网上在线续卡功能只提供即时续卡（支付续卡费用日起算），如果需要办理其他时间的续卡，请通过"
<a href="">联系我们</a>
"中的联系方式，询问具体续卡事宜。 
<br>
</div>
                </div>
            </div>
        </div>
    </div>
    <my-footer></my-footer>
    </div>
    
</template>

<script>
import MyHeader from '@/components/MyHeader.vue'
import MyFooter from '@/components/MyFooter.vue'
    export default {
  components: { MyHeader,MyFooter },
        
    }
</script>

<style lang="scss" scoped>
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.whole{
    background-color: #f5f5f5;
    color: #333;
    padding: 50px 0 100px;
    >.top{
        text-align: center;
        padding-bottom: 30px;
        >img{
            vertical-align: middle;
        }
    }
    >.bottom{
        background-color: #fff;
        border: 1px solid #efefef;
        border-radius: 10px;
        width: 1080px;
        margin: 0 auto;
        height: 396px;
        >.bottom_bar{
            padding: 20px;
            >h2{
                font-size: 18px;
                font-weight: bold;
                border-bottom: 1px solid #e2e2e2;
                padding-bottom: 7px;
            }
            >.hope{
                width: 1036px;
                height: 75px;
                >.if{
                    line-height: 30px;
                    margin: 15px 0;
                    letter-spacing: 1px;
                    font-size: 14px;
                    >a{
                        color: #4f95c8;
                        font-style: italic;
                        text-decoration: underline;
                    }
                }
            }
            >.number{
                    position: relative;
                    margin-bottom: 30px;
                    margin-top: 20px;
                    >ul{
                        list-style: none;
                        display: flex;
                        justify-content: left;
                        >li{
                            width: 400px;
                            >label{
                                font-size: 14px;
                            }
                            >input{
                                height: 38px;
                                border: 1px solid #d1cfc2;
                                line-height: 38px;
                                padding-left: 5px;
                                color: #333;
                                width: 250px;
                                margin: 0 10px;
                            }
                        }
                    }
                    >a{
                        background-color: #f39801;
                        display: block;
                        width: 160px;
                        height: 40px;
                        line-height: 40px;
                        border-radius: 20px;
                        font-size: 18px;
                        text-align: center;
                        color: #fff;
                        position: absolute;
                        right: 50px;
                        top: 0;
                        text-decoration: none;
                    }
            }
            >.add{
                font-size: 18px;
                cursor: pointer;
                margin-left: 30px;
                color: #474747;
                >span{
                    background-position: -76px -422px;
                    display: inline-block;
                    vertical-align: -11px;
                    width: 38px;
                    height: 38px;
                    margin: 0 10px 0 30px;
                    background-repeat: no-repeat;
                }
            }
            >.explain{
                font-size: 14px;
                line-height: 20px;
            >.exlplain_bar{
               padding-top:8px;
               line-height: 20px;
            }
        
        }
    }
}
}
</style>